<template>
	<view class="goods-box" :style="dynamicStyles">
		<view class="goods-list">
			<view v-if="showData.goodsList && showData.goodsList.length && showData.goodsList[0].id"
				v-for="(item, index) in showData.goodsList" :key="index" class="goods-li"
				:class="{ 'is-goods-cell2': showData.showType === '2', 'is-goods-cell3': showData.showType === '3' }">
				<view class="goods-li-box">
					<navigator hover-class="none" :url="'/pages/product/goods-detail/index?id=' + item.id">
						<view class="goods-item" @tap="" :style="dynamicGoodsStyles">
							<view class="goods-img-one" :style="{ backgroundImage: 'url(' + item.spuUrls[0] + ')' }">
							</view>
							<view class="goods-box-info">
								<view class="goods-info-title" v-if="showData.showName"
									:style="{ color: showData.nameColor, fontSize: showData.nameSize + 'px', 'font-weight': showData.nameStyle == '1' ? 'bold' : '' }">
									{{ item.name }}
								</view>
								<view class="goods-info-desc" v-if="showData.showDesc && item.subTitle"
									:style="{ color: showData.descColor, fontSize: showData.descSize + 'px', 'font-weight': showData.descStyle == '1' ? 'bold' : '' }">
									{{ item.subTitle }}
								</view>
								<view v-if="showData.showTag">
									<u-tag type="success" v-if="item.freightType == '0'" text="包邮" size="mini"
										mode="plain"></u-tag>
								</view>
								<view style="display: flex;justify-content: space-between;padding-top: 8px;">
									<view class="goods-info-salesVolume" v-if="showData.showSalesVolume"
										:style="{ color: showData.salesVolumeColor, fontSize: showData.salesVolumeSize + 'px', 'font-weight': showData.salesVolumeStyle == '1' ? 'bold' : '' }">
										已售{{ item.salesVolume }}
									</view>
									<view class="goods-info-stock" v-if="showData.showStock"
										:style="{ color: showData.stockColor, fontSize: showData.stockSize + 'px', 'font-weight': showData.stockStyle == '1' ? 'bold' : '' }">
										{{ item.stock }}
									</view>
								</view>
								<view class="goods-info-price">
									<view class="price-info" v-if="showData.showSalesPrice"
										:style="{ color: showData.salesPriceColor, fontSize: showData.salesPriceSize + 'px', 'font-weight': showData.salesPriceStyle == '1' ? 'bold' : '' }">
										￥{{ item.salesPrice }}</view>
									<view class="goods-info-buy-btn">
										<u-icon v-if="showData.buyBtnStyle === '1'" name="bag"
											:color="showData.buyBtnColor" :size="`${showData.buyBtnSize}px`"></u-icon>
										<u-icon v-if="showData.buyBtnStyle === '2'" name="shopping-cart"
											:color="showData.buyBtnColor" :size="`${showData.buyBtnSize}px`"></u-icon>
										<wd-tag v-if="showData.buyBtnStyle === '3'" :size="`${showData.buyBtnSize}px`"
											:color="showData.buyBtnColor" plain>{{
												showData.buyBtnText }}</wd-tag>
									</view>
								</view>
							</view>
						</view>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { computed } from 'vue';
const props = defineProps({
	showData: {
		type: Object,
		default: () => { },
	},
});
const dynamicStyles = computed(() => {
	const commonStyle = props.showData.commonStyle;
	return {
		marginTop: `${commonStyle.styleTopMargin}px`,
		marginLeft: `${commonStyle.styleLeftMargin}px`,
		marginRight: `${commonStyle.styleRightMargin}px`,
		marginBottom: `${commonStyle.styleBottomMargin}px`,
		paddingTop: `${commonStyle.styleTopPadding}px`,
		paddingLeft: `${commonStyle.styleLeftPadding}px`,
		paddingRight: `${commonStyle.styleRightPadding}px`,
		paddingBottom: `${commonStyle.styleBottomPadding}px`,
		borderTopLeftRadius: `${commonStyle.styleLtRadius}px`,
		borderTopRightRadius: `${commonStyle.styleRtRadius}px`,
		borderBottomLeftRadius: `${commonStyle.styleLbRadius}px`,
		borderBottomRightRadius: `${commonStyle.styleRbRadius}px`,
		...(commonStyle.bgPicUrl && {
			background: `url(${commonStyle.bgPicUrl})`,
			backgroundRepeat: 'no-repeat',
			backgroundPosition: 'center',
			backgroundSize: '100% 100%'
		}),
		...(!commonStyle.bgPicUrl && {
			background: `linear-gradient(${commonStyle.bgColorDirection || 'to right'}, 
				${commonStyle.bgStartColor || ''}, 
				${commonStyle.bgEndColor || commonStyle.bgStartColor || ''})`
		}),
	};
});
const dynamicGoodsStyles = computed(() => {
	const commonStyle = props.showData.goodsCommonStyle;
	return {
		marginTop: `${commonStyle.styleTopMargin}px`,
		marginLeft: `${commonStyle.styleLeftMargin}px`,
		marginRight: `${commonStyle.styleRightMargin}px`,
		marginBottom: `${commonStyle.styleBottomMargin}px`,
		paddingTop: `${commonStyle.styleTopPadding}px`,
		paddingLeft: `${commonStyle.styleLeftPadding}px`,
		paddingRight: `${commonStyle.styleRightPadding}px`,
		paddingBottom: `${commonStyle.styleBottomPadding}px`,
		borderTopLeftRadius: `${commonStyle.styleLtRadius}px`,
		borderTopRightRadius: `${commonStyle.styleRtRadius}px`,
		borderBottomLeftRadius: `${commonStyle.styleLbRadius}px`,
		borderBottomRightRadius: `${commonStyle.styleRbRadius}px`,
		...(commonStyle.bgPicUrl && {
			background: `url(${commonStyle.bgPicUrl})`,
			backgroundRepeat: 'no-repeat',
			backgroundPosition: 'center',
			backgroundSize: '100% 100%'
		}),
		...(!commonStyle.bgPicUrl && {
			background: `linear-gradient(${commonStyle.bgColorDirection || 'to right'}, 
				${commonStyle.bgStartColor || ''}, 
				${commonStyle.bgEndColor || commonStyle.bgStartColor || ''})`
		}),
	};
});
</script>

<style scoped lang="scss">
.goods-box {
	position: relative;

	.goods-list {
		display: flex;
		flex-wrap: wrap;

		.goods-li {
			width: 100%;

			&.is-goods-cell2 {
				width: 50%;
			}

			&.is-goods-cell3 {
				width: 33.33%;
			}

			.goods-li-box {
				.goods-item {
					position: relative;
					background-color: #fff;
					padding: 10px;

					.goods-img-one {
						width: 100%;
						background-repeat: no-repeat;
						background-size: cover;

						&::before {
							content: '';
							padding-top: 100%;
							float: left;
						}

						&::after {
							content: '';
							display: block;
							clear: both;
						}
					}

					.goods-box-info {
						margin-top: 3px;

						.goods-info-title {
							width: 100%;
							font-size: 12px;
							overflow: hidden;
							text-overflow: ellipsis;
							-o-text-overflow: ellipsis;
							-webkit-text-overflow: ellipsis;
							-moz-text-overflow: ellipsis;
							white-space: nowrap;
						}

						.goods-info-desc {
							width: 100%;
							font-size: 12px;
							color: #999;
							overflow: hidden;
							text-overflow: ellipsis;
							-o-text-overflow: ellipsis;
							-webkit-text-overflow: ellipsis;
							-moz-text-overflow: ellipsis;
							white-space: nowrap;
							margin-top: 5px;
						}

						.goods-info-price {
							position: relative;
							margin-top: 10px;

							&.goods-cell-3 {
								padding-right: 20px;
							}

							.price-info {
								width: 100%;
								font-size: 14px;
								color: #ff4444;
								overflow: hidden;
								text-overflow: ellipsis;
								-o-text-overflow: ellipsis;
								-webkit-text-overflow: ellipsis;
								-moz-text-overflow: ellipsis;
								white-space: nowrap;
							}

							.goods-info-buy-btn {
								position: absolute;
								top: 0;
								right: 0;

								.el-button {
									line-height: 22px;
									height: 24px;
									padding: 0 7px;
								}
							}
						}
					}
				}
			}
		}
	}
}
</style>
